<template>
    <contact ref="contactRef">
        <template #header>
            <MrCustom bg-color="bg-gradual-blue ">
            </MrCustom>
            <view class="bg-white radius">
                <view class="radius-lg-top solid-bottom">
                    <view class="padding flex justify-between margin-lr-sm">
                        <view class="text-center" @click="toNotice">
                            <view class="cu-avatar lg radius bg-gradual-orange">
                                <view class="cuIcon-noticefill">
                                    <view class="cu-tag badge" v-if="noticeNoReadNum">
                                        <block>{{ noticeNoReadNum }}</block>
                                    </view>
                                </view>
                            </view>
                            <view class="flex justify-center padding-tb-xs text-black">通知</view>
                        </view>
                        <view class="text-center" @click="toComment">
                            <view class="cu-avatar lg radius bg-gradual-green">
                                <view class="cuIcon-commentfill">
                                    <view class="cu-tag badge" v-if="commentNoReadNum">
                                        <block>{{ commentNoReadNum }}</block>
                                    </view>
                                </view>
                            </view>
                            <view class="flex justify-center padding-tb-xs text-black">评论</view>
                        </view>
                        <view class="text-center" @click="toReply">
                            <view class="cu-avatar lg radius bg-gradual-blue">
                                <view class="cuIcon-radiobox">
                                    <view class="cu-tag badge" v-if="replyNoReadNum">
                                        <block>{{ replyNoReadNum }}</block>
                                    </view>
                                </view>
                            </view>
                            <view class="flex justify-center padding-tb-xs text-black">回复</view>
                        </view>
                        <view class="text-center" @click="toLike">
                            <view class="cu-avatar lg radius bg-gradual-pink">
                                <view class="cuIcon-appreciatefill">
                                    <view class="cu-tag badge" v-if="likeNoReadNum">
                                        <block>{{ likeNoReadNum }}</block>
                                    </view>
                                </view>
                            </view>
                            <view class="flex justify-center padding-tb-xs text-black">赞</view>
                        </view>
                    </view>
                </view>
            </view>
            <button @click="toAI" class="cu-btn xxl flex bg-gradual-purple margin-xs radius">
                <view class="cu-tag badge">
                    new
                </view>
                智慧助手
            </button>
        </template>
    </contact>

</template>

<script setup lang="ts">
import {ref} from "vue";

import {onHide, onShow} from "@dcloudio/uni-app";
import Contact from "@/pages/user/message/components/Contact.vue";
import {useUserStore} from "@/store";
import api from "@/api";
import {webSocketPathPrefix} from '/settings'
import MrCustom from "@/components/common/MrCustom.vue";

const prefix = webSocketPathPrefix
const userStore = useUserStore()

const contactRef = ref()
const pagingRef = ref()
const currentTab = ref(0)
const socketOpen = ref(false)

const commentNoReadNum = ref(0)
const replyNoReadNum = ref(0)
const likeNoReadNum = ref(0)
const noticeNoReadNum = ref(0)

const toAI = () => {
    uni.navigateTo({
        url: '/pages/user/message/ai/ai'
    })
}
const toNotice = () => {
    uni.navigateTo({
        url: '/pages/user/message/notice/notice',
    })
}
const toComment = () => {
    uni.navigateTo({
        url: '/pages/user/message/comment/comment?commentNoReadNum=' + commentNoReadNum.value
    })
}
const toReply = () => {
    uni.navigateTo({
        url: '/pages/user/message/reply/reply?replyNoReadNum=' + replyNoReadNum.value
    })
}
const toLike = () => {
    uni.navigateTo({
        url: '/pages/user/message/like/like?likeNoReadNum=' + likeNoReadNum.value
    })
}


const getNoRead = () => {
    api.redis.getNoRead({}).then(res => {
        if (res && res.data.code === 0) {
            commentNoReadNum.value = res.data.data.commentNoReadNum
            replyNoReadNum.value = res.data.data.replyNoReadNum
            likeNoReadNum.value = res.data.data.likeNoReadNum
            noticeNoReadNum.value = res.data.data.noticeNoReadNum
        }
    })
}


onShow(() => {
    connect(encodeURI(userStore.userInfo.username), encodeURI(userStore.userInfo.username))
    setTimeout(() => {
        contactRef.value.doReload()
        getNoRead()
    }, 100)
})

onHide(() => {
    if (socketOpen.value) {
        uni.closeSocket();
    }
    contactRef.value.doClear()
    socketOpen.value = false
})

const connect = (fromUsername: any, toUsername: any) => {
    uni.connectSocket({
        // url: 'wss://zzjtpp.top/piccAPI/chat/websocket/' + fromUsername + '/' + toUsername,
        url: prefix + fromUsername + '/' + toUsername,
        success: () => {
            uni.onSocketOpen(() => {
                socketOpen.value = true
                console.log('WebSocket 连接成功！');
            })
            uni.onSocketMessage((res) => {
                console.log('接收消息')
                let tmp = JSON.parse(res.data)
                if (tmp.type === "chat") {
                    contactRef.value.doAddNum(res.data)
                } else if (tmp.type === "comment") {
                    commentNoReadNum.value += 1
                } else if (tmp.type === "reply") {
                    replyNoReadNum.value += 1
                } else if (tmp.type === "like") {
                    likeNoReadNum.value += 1
                } else if (tmp.type === "cancelLike" && likeNoReadNum.value > 0) {
                    likeNoReadNum.value -= 1
                } else if (tmp.type === "notice") {
                    noticeNoReadNum.value += 1
                } else if (tmp.type === "cancelNotice" && noticeNoReadNum.value > 0) {
                    noticeNoReadNum.value -= 1
                }
            })
            uni.onSocketClose(function (res) {
                socketOpen.value = false
                console.log('WebSocket 已关闭！');
            });
        }
    })
}


</script>

<style>

</style>
